<template>
  <div class="learn-view-info">
    <el-form type="flex" :model="detailsList" class="">
      <el-form-item>
        <span style="font-size:28px;font-weight:blod">{{
          detailsList.title
        }}</span>
      </el-form-item>
      <el-form-item>
        <span>{{ detailsList.author }} | {{ detailsList.createTime }}</span>
      </el-form-item>
      <el-form-item>
        <div
          v-if="detailsList.videoUrl"
          class="question-video"
          style="text-align:center"
        >
          <video
            :src="detailsList.videoUrl"
            controls="controls"
            height="200"
            width="300"
          ></video>
        </div>
        <div class="ql-container ql-snow">
          <div class="text ql-editor"></div>
        </div>
      </el-form-item>
      <p class="model-split-line"></p>
      <el-form-item class="learningTime">
        <label>学习时长</label>
        <div style="float:right">{{ detailsList.learningTime }}分钟</div>
      </el-form-item>
      <p class="model-split-line"></p>
      <el-form-item class="learningTime">
        <label>标签({{ labelLength }})</label>
        <template v-for="item in labelList">
          <div style="margin-top:10px;" v-bind:key="item">
            <ul>
              <li
                style="background-color: #409eff;border-radius: 5px;list-style-type:none;list-style:none;float:left;color:white;margin-left:10px;padding: 0px 10px 0px 10px;"
              >
                {{ item }}
              </li>
            </ul>
          </div>
        </template>
      </el-form-item>
      <p class="model-split-line"></p>
      <el-form-item class="learningTime">
        <label>封面</label>
        <div style="width:200px;height:200px">
          <img
            :src="detailsList.coverUrl"
            @click="$imgPreview"
            :data-imgpreview="detailsList.coverUrl ? detailsList.coverUrl : ''"
            alt=""
            style="width:100%;height:100%"
          />
        </div>
      </el-form-item>
      <p class="model-split-line"></p>
      <el-form-item class="learningTime">
        <label>原文链接</label>
        <span style="float:right">{{ detailsList.originalLink }}</span>
      </el-form-item>
      <p class="model-split-line"></p>
      <el-form-item class="learningTime">
        <label style="display:block;">访问人员({{ total }})</label>
        <template v-for="(item, index) in userList[0]">
          <div
            v-bind:key="index"
            style="display: inline-block;margin-left:5px;"
          >
            <div v-if="total > 0" class="header" style="margin-left:15px;">
              <img
                style="width:100%;height:100%;border-radius: 50%;"
                :src="item.headUrl || defaultUserHead"
                alt=""
              />
              <span
                :title="item.accountName"
                style="display: block;margin-top:-100px;color:black;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;"
                >{{ item.accountName }}</span
              >
            </div>
            <div
              v-if="total > 0"
              style="color:black;width:100px;height:40px;border-radius:40%;text-align:center;line-height: 40px;background-color: rgb(238, 241, 246);margin-top:-10px;"
            >
              {{ item.sumLearningTime }}
            </div>
          </div>
        </template>
      </el-form-item>
    </el-form>
    <span
      v-if="total > 10"
      slot="footer"
      class="dialog-footer"
      style="margin-left:85%;cursor:pointer;font-size:17px;"
      @click="moreData"
    >
      加载更多V
    </span>
  </div>
</template>
<script>
import {
  getLearningMaterialsDetail,
  selectLearningTimeByAccount
} from "@/api/rdLearnOrg";
export default {
  name: "LearnInfo",
  props: {
    oldInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      detailsList: {}, //资料详情
      labelLength: "", //标签个数
      labeldetailList: [], //详情标签列表
      currentPage: 1,
      pageSize: 10,
      total: 0,
      userList: [],
      timeList: [],
      labelList: [],
      defaultUserHead: require("../../../assets/images/default/userHead.png")
    };
  },
  created() {
    let that = this;
    getLearningMaterialsDetail({ id: that.oldInfo.id }).then(res => {
      that.detailsList = res.data;
      that.labeldetailList = that.detailsList.label;
      that.labelList = res.data.label.split(",");
      that.labelLength = that.labelList.length;
      $(".text").html(that.detailsList.text);
    });
    that.selectLearningTimeByAccount();
  },
  methods: {
    selectLearningTimeByAccount() {
      let that = this;
      let parames = {
        queryType: 1,
        pageIndex: that.currentPage - 1,
        pageSize: that.pageSize,
        learningMaterialsId: that.oldInfo.id
      };
      selectLearningTimeByAccount(parames).then(res => {
        if (res.status == 200) {
          that.userList.push(res.data);
          for (let i = 0; i < that.userList[0].length; i++) {
            that.timeList.push(that.userList[0][i].sumLearningTime);
          }
          that.formatTime(that.timeList);
          that.total = res.total;
        }
      });
    },
    //时间格式化
    formatTime(timeList) {
      let that = this;
      for (let i = 0; i < that.timeList.length; i++) {
        let days = parseInt(that.timeList[i] / (60 * 60 * 24));
        let hours = parseInt((that.timeList[i] % (60 * 60 * 24)) / (60 * 60));
        let minutes = parseInt((that.timeList[i] % (60 * 60)) / 60);
        let second = that.timeList[i] % 60;
        that.userList[0][i].sumLearningTime =
          days != 0
            ? days + "天"
            : "" + hours != 0
            ? hours + "小时"
            : "" + minutes != 0
            ? minutes + "分钟"
            : "" + second + "秒";
      }
    },
    moreData() {
      //加载更多
      let that = this;
      that.currentPage++;
      that.selectLearningTimeByAccount();
    }
  }
};
</script>
<style lang="scss" scoped>
.question-view-wrap {
  .type-item-wrap {
    line-height: 40px;
    .type-title {
      color: #409eff;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
  }
}
.model-split-line {
  margin-top: -12px;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 10px;
}
.title {
  font-size: 20px;
}
.learn-view-info {
  padding: 0px 100px 20px 100px;
}
.learningTime {
  label {
    font-weight: bold;
    font-size: 15px;
  }
}
.header {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  text-align: center;
  line-height: 70px;
  background-color: rgb(238, 241, 246);
}
.text {
  img {
    width: 100%;
  }
}
</style>
<style lang="scss">
.text {
  img {
    width: 100%;
  }
}
.learn-view-info {
  video {
    width: 100%;
  }
}
</style>
